﻿/// <reference path="~/app/libs/sencha-touch-debug.js" />
Ext.define("iMobileS.view.ProductDetailsContainer", {
    extend: 'Ext.form.Panel',
    alias: "widget.productdetailscontainer",
    requires: [
                'Ext.form.FieldSet'
            ],
    initialize: function () {
        this.callParent(arguments);
        //Define toolbar and button on toolbar
        var backbutton = {
            xtype: "button",
            text: "Back",
            ui: "back",
            handler: this.onBackToProducts,
            scope: this
        };

        var topToolbar = {
            xtype: "toolbar",
            title: 'Product Order',
            docked: "top",
            items: [
                backbutton,
                { xtype: 'spacer' }
            ]
        };

        //Define the area to display comapany description
        var descriptionBox = {
            id: "descriptionBox",
            xtype: "label",
            html: "<div>Input quantity to buy</div>",
            cls: "desciption-box"
        }

        //Define the check box list for format selection
        var productDetails = {
            xtype: "fieldset",
            width: '100%',
            title: "<div>Order product</div>",
            items: [
                {
                    xtype: "hiddenfield",
                    id: "RecordIndex",
                    name: "RecordIndex",
                    html: ''
                },
                {
                    xtype: "hiddenfield",
                    id: "ProductID",
                    name: "ProductID"
                },
                {
                    xtype: "textfield",
                    id: 'ProductName',
                    name: 'ProductName',
                    label: '<div>Product Name</div>',
                    readOnly: true,
                    labelAlign: "left",
                    labelWidth: "30%"
                }, {
                    xtype: "textfield",
                    id: 'UnitPrice',
                    name: 'UnitPrice',
                    label: '<div>Unit Price</div>',
                    readOnly: true,
                    labelAlign: "left",
                    labelWidth: "30%"
                }, {
                    xtype: "textfield",
                    id: 'QuantityPerUnit',
                    name: 'QuantityPerUnit',
                    label: '<div>Quantity Per Unit</div>',
                    readOnly: true,
                    labelAlign: "left",
                    labelWidth: "30%"
                }, {
                    xtype: "textfield",
                    id: 'Quantity',
                    name: 'Quantity',
                    label: '<div>Quantity</div>',
                    value: '',
                    labelAlign: "left",
                    labelWidth: "30%"
                }, {
                    xtype: "textfield",
                    id: 'Total',
                    name: 'Total',
                    label: '<div>Total</div>',
                    readOnly: true,
                    listeners: {
                        keyup: { fn: this.onCalculatorTotal, scope: this }
                    },
                    labelAlign: "left",
                    labelWidth: "30%"
                },
                {
                    xtype: "hiddenfield",
                    id: "orderdetailinfo",
                    name: "orderdetailinfo"
                }
            ]
        }

        var saveButton = {
            xtype: "button",
            ui: "action",
            text: "Save",
            cls: "save-button",
            handler: this.onSaveProductDetails,
            scope: this
        }

        this.add([topToolbar, descriptionBox, productDetails, saveButton]);
    },
    fullscreen: true,
    onBackToProducts: function () {
        if (!this.validate()) {
            Ext.Msg.confirm("Confirmation", "Do you want to save your selection?", this.onConfirm, this);
        }
        else {
            this.fireEvent("onBackToProducts", this);
            this.reset();
        }

    },
    onSaveProductDetails: function () {
        if (this.validate()) {
            var total = parseFloat(Ext.getCmp('Total').getValue());
            var quantity = parseInt(Ext.getCmp('Quantity').getValue());
            this.fireEvent("onSaveProductDetails", quantity, total);
            this.reset();
        }
        else {
            Ext.Msg.alert("Confirmation", "Please input quantity of product(s) to save.", Ext.emptyFn);
        }
    },
    validate: function () {
        var quantity = Ext.getCmp('Quantity').getValue();
        var isValid = false;
        if (quantity != '') {
            isValid = true;
        }
        return isValid;
    },
    onCalculatorTotal: function () {
        var unitPrice = parseFloat(Ext.getCmp('UnitPrice').getValue());
        var quantity = parseInt(Ext.getCmp('Quantity').getValue());
        var total = unitPrice * quantity;
        Ext.getCmp('Total').setValue(total);
    },
    onConfirm: function (msg) {
        if (msg == "yes") {
            this.onSaveProductDetails();
        }
        else {
            this.fireEvent("onBackToProducts", this);
        }
    }
});